<template>
  <a-card :bordered="false" :loading="card.loading">
    <a-form
      :form="form"
      :labelCol="{lg: {span: 7}, sm: {span: 7}}"
      :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" >
      <a-form-item :label="__('角色')">
        <a-select
          mode="multiple"
          name="role_id"
          option-label-prop="label"
          v-decorator="[
            'role_id',
             {
               rules: [{ required: true, message: __('请选择角色') }]
             }
          ]">
          <a-select-option v-for="role in roles.data" :key="role.id" :value="role.id" :disabled="role.disabled" :label="role.name"> {{ role.title }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="__('昵称')">
        <a-input
          v-decorator="[
              'nickname',
              {rules: [{ required: true, message: __('请输入昵称') }]}
            ]" />
      </a-form-item>
      <a-form-item :label="__('用户名')">
        <a-input
          v-decorator="[
              'username',
              {rules: [{ required: true, message: __('请输入用户名') }]}
            ]"
          name="username"
          :placeholder="__('请输入用户名')" />
      </a-form-item>
      <a-form-item :label="__('Email')">
        <a-input
          v-decorator="[
              'email',
              {rules: [{ required: true, message: __('请输入邮箱') }]}
            ]"
          name="email"
          :placeholder="__('请输入邮箱')" />
      </a-form-item>
      <a-form-item :label="__('密码')">
        <a-input-password
          v-decorator="[
              'password',
              {rules: [{ required: true, message: __('请输入密码') }]}
            ]"
          name="password"
          :placeholder="__('请输入密码')" />
      </a-form-item>
      <a-form-item :label="__('状态')">
        <a-radio-group v-decorator="['status', { initialValue: 1 }]">
          <a-radio :value="1">{{ __('正常') }}</a-radio>
          <a-radio :value="0">{{ __('禁止') }}</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapperCol="{ span: 10, offset: 7 }">
        <a-button :loading="button.loading" :disabled="button.disabled" type="primary" @click="handleSubmit">{{ __('form.basic-form.form.submit') }}</a-button>
        <a-button style="margin-left: 8px" @click="handleReset">{{ __('重置') }}</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import api from '@/api'
import treeUtils from '@/utils/tree'
export default {
  name: 'AdminAdminAdd',
  props: {
    dialogVm: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      card: {
        loading: true
      },
      button: {
        loading: false,
        disabled: false
      },
      roles: {
        data: []
      }
    }
  },
  mounted () {
    api.admin.role.index({
      limit: 0
    }).then(response => {
      const rows = []
      response.data.data.rows.forEach((row) => {
        row.title = row.name
        rows.push(row)
      })
      treeUtils.init(rows)
      treeUtils.getTreeList(treeUtils.getTreeArray(0), 'title').forEach(row => {
        this.roles.data.push({ id: row.id, pid: row.pid, name: row.name, title: row.title, disabled: row.disabled })
      })
      this.card.loading = false
    })
  },
  methods: {
    // handler
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.button.loading = true
          this.button.disabled = true
          api.admin.admin.add(values).then(response => {
            this.button.loading = false
            this.button.disabled = false
            this.dialogVm.$emit('ok')
          }).catch(() => {
            this.button.loading = false
            this.button.disabled = false
          })
        }
      })
    },
    handleReset (e) {
      e.preventDefault()
      this.form.resetFields()
    }
  }
}
</script>
